<!--
 * @Author: liujinjun681 liujinjun681@qq.com
 * @Date: 2022-10-28 09:54:28
 * @LastEditors: liujinjun681 liujinjun681@qq.com
 * @LastEditTime: 2022-10-31 11:07:35
 * @FilePath: \hd_ims_web\src\components\HdPrintPage\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div :style="!debug ? 'overflow: hidden; height: 0px; width: 0px' : ''">
    <div id="printPage">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import printJS from 'print-js'
export default {
  name: 'HdPrintPage',
  props: {
    size: {
      type: String,
      default: '',
    },
    params: {
      type: Object,
      default: function () {
        return {}
      },
    },
    width: {
      type: String,
      default: '800px',
    },
    debug: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    print() {
      printJS({
        documentTitle: 'printPage',
        printable: 'printPage', // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
        type: 'html', // 可打印的类型。可用的打印选项包括：pdf，html，图像，json和raw-html。
        style: ['@page { margin: 0mm;} body {margin: 0;} h4 {margin:0}'],
        targetStyles: ['*'], // 库在打印HTML元素时处理任何样式
        ...this.params,
        onPrintDialogClose: (e) => {
          this.$emit('onPrintDialogClose')
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
#printPage {
  background: white;
  .content {
    line-height: 28px;
    margin: 32px 20px 10px 20px;
    h1 {
      font-size: 26px;
      text-align: center;
      font-family: '宋体';
      font-weight: 700;
    }
    table {
      width: 100%;
      table-layout: fixed;
      border: 1px solid black;
      border-collapse: collapse;
      text-align: center;
      line-height: 25px;
      font-size: 16px;
      td,
      th {
        border: 1px solid black;
      }
    }
  }
}
</style>
